<template lang="xiuGaiShoJi">
    <div>
        <div>
            <van-nav-bar title="修改手机" style="background-color: #f9f9f9;" left-arrow>
                <template #left>
                    <van-icon @click="tuiChuXiuGaiShoJi" name="arrow-left" size="18" />
                </template>
            </van-nav-bar>
        </div><br>
        <!-- 验证码原码号 -->
        <div class="yanZhenMa_div">
            <div class="yi">1.验证码原码号</div>
            <div class="yi">2.绑定新手机</div>
        </div><br>
        <!-- 手机号 -->
        <van-cell-group>
            <van-cell title="180****1849" value="内容">
                <van-button type="default">发送验证码</van-button>
            </van-cell>
            <van-field v-model="yanZhengMa" placeholder="请输入验证码" />
          </van-cell-group><br>
          <!-- 下一步 -->
          <div style="text-align:center;">
              <van-button color="#52bc9b" style="width: 80%;">下一步</van-button>
          </div>
          <!-- 温馨提示 -->
          <div class="tiShi_div">
            <p>馨提示:</p>
            <p>机号码修改成功后需要使用新的手机号码进行登录</p>
          </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { NavBar, Cell, CellGroup,Button,Field } from 'vant';

    export default {
        data() {
            return {
                yanZhengMa:""
            }
        },
        components: {},
        computed: {},
        methods: {
            // 退出修改手机
            tuiChuXiuGaiShoJi() {
                this.$router.go(-1)
            }
        },
    }
</script>
<style lang="less" scoped>
    .van-nav-bar .van-icon {
        color: #52bc9b;
    }

    .template_span {
        color: #52bc9b;
    }

    .nav-bar {
        background-color: #f9f9f9;
    }

    .yanZhenMa_div {
        width: 100%;
        height: 6vh;
        background-color: gainsboro;
        line-height: 6vh;
        display: flex;
        justify-content: space-around;
    }
    .tiShi_div > p {
        margin: 16px 40px;
        color: #9999b1;
        font-size: 14px;
    }
</style>